﻿<%@ Page Language="C#" AutoEventWireup="true" MasterPageFile="~/PortalParts/Portal.Master" CodeBehind="Statistics.aspx.cs" Inherits="ZHDJ.Web.Portal.Grassroots.Statistics" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <link href="../../Resource/Themes/default/CSS/FusionCharts/style.css" rel="stylesheet" type="text/css" />
    <link href="../../Resource/Themes/default/CSS/FusionCharts/prettify.css" rel="stylesheet" type="text/css" />
    <script src="../../Resource/JS/FusionCharts/Charts/FusionCharts.js" type="text/javascript"></script>
    <script src="../../Resource/JS/FusionCharts/prettify.js" type="text/javascript"></script>
    <script src="../../Resource/JS/FusionCharts/json2.js" type="text/javascript"></script>
    <script src="../../Resource/JS/FusionCharts/lib.js" type="text/javascript"></script>
    <script src="../../Resource/JS/FusionCharts/DD_belatedPNG_0.0.8a-min.js" type="text/javascript"></script>
    <script type="text/javascript">
        DD_belatedPNG.fix('img');
    </script>
    <style type="text/css">
        #chartdiv {
            margin: 5px auto;
            padding: 2px;
            width: 600px;
            height: 420px;
            border: 1px solid #99dcdc;
            background-color: #fff;
            border-radius: 6px;
            text-align: center;
        }
        .btn {
            height: 25px;
            width: 50px;
        }
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div class="party-navigation">
        当前位置：<a href="/Default.aspx">首页</a> >
          <a href="Default.aspx">驻点直联工作</a> >
        情况统计        
    </div>
	<div class="bgline"></div>
    <f:PageManager ID="PageManager1" runat="server" />
    <asp:HiddenField ID="hdGroupID" runat="server" Value="" />
    <asp:HiddenField ID="hdFist" runat="server" Value="" />
    <asp:HiddenField ID="hdAllDataSet" runat="server" Value="" />
    <asp:HiddenField ID="hdDataSets" runat="server" Value="" />
    <div>
        <div>
            <table border="0" cellpadding="2" cellspacing="2">
                <tr>
                    <td nowrap align="right">开始时间：
                    </td>
                    <td nowrap align="left">

                        <f:DatePicker ID="dtStatistics" runat="server" ShowLabel="false" Label="日期"
                            LabelAlign="right" LabelWidth="60px"
                            DateFormatString="yyyy-MM-dd"  >
                        </f:DatePicker>
                    </td>
                    <td nowrap align="right">结束时间：</td>
                    <td nowrap align="left">

                     <f:DatePicker ID="dtEndTime" runat="server" Label="日期" ShowLabel="false"
                            LabelAlign="right" LabelWidth="60px"
                           CompareControl="dtStatistics" DateFormatString="yyyy-MM-dd"
                    CompareOperator="GreaterThanEqual" CompareMessage="结束日期应该大于开始日期" >
                        </f:DatePicker>
                    </td>
                    <td style="width: 100%" align="left">
                       <input type="submit" value="查询" onclick="return cleardata();" class="btn" />
                    </td>
                </tr>
            </table>
        </div>
        <div id="chartdiv">Chart will load here</div>
        <div id="chartdiv1" style="height: 520px;">数据加载中</div>
        <div id="divclick" style="height: 30px; vertical-align: middle; text-align: center;">
        </div>
        <div style="text-align: center;">
        </div>
    </div>
    <script type="text/javascript">
        $(document).ready(function () {

            var val = $("#ctl00_ContentPlaceHolder1_hdGroupID").val();
            if (val != null && val != undefined && val != "" && val != "null") {
                //具体街道
                FusionCharts.setCurrentRenderer('javascript');
                var dataString = '<%=GetDataString() %>';
            var chart = new FusionCharts("../../Resource/JS/FusionCharts/Charts/StackedColumn3D.swf", "ChartId", "100%", "100%", "0", "0");
            chart.setXMLData(dataString);
            chart.render("chartdiv");
            $("#chartdiv1").css("display", "none");
        }
        else {
                //整个山海天旅游度假区
            var dataString1 = '<%=GetDataString1() %>';
            FusionCharts.setCurrentRenderer('javascript');
            var chart1 = new FusionCharts("../../Resource/JS/FusionCharts/Charts/MSColumn3D.swf", "ChartId1", "100%", "100%", "0");
            chart1.setXMLData(dataString1);
            chart1.render("chartdiv1");
            $("#chartdiv").css("display", "none");
            $("#ctl00_ContentPlaceHolder1_hdFist").val(dataString1);

            var ret = '<%=GetStreetDataSets() %>';
                $("#ctl00_ContentPlaceHolder1_hdAllDataSet").val(ret);
            var arr = ret.split(',');
            var htm = "<div style='margin-left:20px;float:left;height:30px;'><div style='float:left;width:15px;height:15px;background-color:#9799D1'></div><div style='float:left;font-size:14;font-weight:500;'>山海天旅游度假区</div></div>";
            for (var i = 0; i < arr.length; i++) {
                htm += "<div style='margin-left:5px;float:left;height:15px;cursor:pointer;'><a id='" + i + "'onclick='javascript:selectshow(this);'><div style='float:left;width:15px;height:15px;background-color:#" + arr[i].split('|')[2] + "'></div><div style='float:left;font-size:14;font-weight:500;margin-left:2px;'>" + arr[i].split('|')[0] + "</div></a></div>";
            }
            $("#divclick").html("<div style='margin:auto auto; width:100%px;height:15px;text-align:center;'>" + htm + "</div>");
        }
      });

    //点击街道的相应色块触发事件，主要实现逻辑是通过动态添加dataset节点。
    function selectshow(str) {
        var i = $(str).attr("id");//获取点击对象的ID
        var arr = $("#ctl00_ContentPlaceHolder1_hdAllDataSet").val().split(',');//根据id值作为索引，并获取相应的街道的dataset节点信息
        var oval = $("#ctl00_ContentPlaceHolder1_hdDataSets").val();//获取已存储的点击过的街道信息
        //判断当前街道是否已存在
        if (oval.indexOf(arr[i].split('|')[1]) > -1) {
            oval = oval.replace(arr[i].split('|')[1], "");
        }
        else {
            oval += arr[i].split('|')[1];
        }
        $("#ctl00_ContentPlaceHolder1_hdDataSets").val(oval);
        var df = $("#ctl00_ContentPlaceHolder1_hdFist").val();
        var newstr = df.replace("</chart>", "") + oval + "</chart>";
        $("#chartdiv1").html("");
        FusionCharts.setCurrentRenderer('javascript');
        var chart2 = new FusionCharts("../../Resource/JS/FusionCharts/Charts/MSColumn3D.swf", "ChartId1", "100%", "100%", "0");
        chart2.setXMLData(newstr);
        chart2.render("chartdiv1");
    }

    function cleardata() {
        $("#ctl00_ContentPlaceHolder1_hdDataSets").val("");
        return true;
    }
    </script>
</asp:Content>
